import { useState, memo, useEffect } from 'react';
import { WindowType } from '@main/type';
import SvgIcon from './SvgIcon';

interface MyComponentProps {
    type: WindowType,
  }

const TitleBar: React.FC<MyComponentProps> = (props)=> {

    const { type } = props;

    const hideWinow = () =>{
        window.electron.ipcRenderer.invoke('window-min', type);
    };
    const maxWinow = () =>{
        window.electron.ipcRenderer.invoke('window-max', type);
        setIsMaxWindow(!isMaxWindow);
    };
    const closeWinow = () =>{
        window.electron.ipcRenderer.invoke('window-close', type);
    };

    const [isMaxWindow, setIsMaxWindow] = useState(false);
    useEffect(()=>{
        window.electron.ipcRenderer.invoke('is-max-window', type).then((res: boolean)=>{
            setIsMaxWindow(res);
        });
    }, []);
    return(
        <div className='title-bar h-32px flex justify-between' >
            {/* 应用图标 */}
            <div className="flex items-center h-full">
                <SvgIcon className="ml-15px text-16px" type='icon-signedIcon'></SvgIcon>
            </div>
            {/* 右侧三个操作图标 */}
            <div className="no-drag flex">
                <SvgIcon className="px-15px text-16px flex items-center" type='icon-zuixiaohua' onClick={hideWinow}></SvgIcon>
                <SvgIcon
                    className="px-15px text-16px flex items-center"
                    type={isMaxWindow ? 'icon-zuidahua-restore' : 'icon-zuidahuaxi-copy'}
                    onClick={maxWinow}>
                </SvgIcon>
                <SvgIcon className="px-15px text-16px  flex items-center" type='icon-guanbi1' onClick={closeWinow}></SvgIcon>
            </div>
        </div>
    );
};

export default memo(TitleBar);